<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>
</head>

<body>
    <div class="header">
        <div class="box1">
            <div class="box11">
                <img src="./img//1.png" alt="" class="img1" />
                <span style="margin-left: 20px">
            <i style="font-size: 20px">30</i> <br />
            <i style="font-size: 5px"> 关注人数(个)</i>
          </span>
            </div>
        </div>
        <div class="box2">
            <div class="box11">
                <img src="./img//2.png" alt="" class="img1" />
                <span style="margin-left: 20px">
            <i style="font-size: 20px">120</i> <br />
            <i style="font-size: 5px"> 订单总数(笔)</i>
          </span>
            </div>
        </div>
        <div class="box3">
            <div class="box11">
                <img src="./img//3.png" alt="" class="img1" />
                <span style="margin-left: 20px">
            <i style="font-size: 20px"> 4183.80</i> <br />
            <i style="font-size: 5px"> 今日订单总金额(元)</i>
          </span>
            </div>
        </div>
        <div class="box4">
            <div class="box11">
                <img src="./img//4.png" alt="" class="img1" />
                <span style="margin-left: 20px">
            <i style="font-size: 20px">100</i> <br />
            <i style="font-size: 5px"> 本月销量(笔)</i>
          </span>
            </div>
        </div>
    </div>
    <!-- 以上是头部 -->
    <!-- 中间 -->
    <div class="aside">
        <div class="left">
            <div class="left1">
                <div class="left11">
                    <span>店铺及商品提示</span>
                    <span>需要关注的店铺信息及待处理事项</span>
                </div>
                <hr>
                <div class="left12">
                    <div class="shop"><i>64</i><i>出售中</i></div>
                    <div class="shop"><i>10</i><i>待回复</i></div>
                    <div class="shop"><i>0</i><i>库存待警</i></div>
                    <div class="shop"><i>3</i><i>仓库中</i></div>

                </div>
            </div>
            <div class="left2"></div>
        </div>
        <div id="main"></div>
    </div>
    <!-- 中间 -->
</body>

</html>

<style lang="scss " scoped>
    html,
    body,
    #app {
        background-color: #f8f9fa !important;
    }
    
    .header {
        display: flex;
        justify-content: space-around;
    }
    
    .box1 {
        width: 304.6px;
        height: 96.8px;
        background-color: white;
        margin: 0px 20px 20px 20px;
        display: flex;
    }
    
    .box11 {
        margin: 20px;
        display: flex;
    }
    
    .img1 {
        width: 50px;
        height: 50px;
    }
    
    .box2 {
        width: 304.6px;
        height: 96.8px;
        background-color: white;
        margin: 0px 20px 20px 20px;
    }
    
    .box3 {
        width: 304.6px;
        height: 96.8px;
        background-color: white;
        margin: 0px 20px 20px 20px;
    }
    
    .box4 {
        width: 304.6px;
        height: 96.8px;
        background-color: white;
        margin: 0px 20px 20px 20px;
    }
    
    .aside {
        display: flex;
        justify-items: center;
    }
    
    .left {
        width: 700px;
        height: 310px;
        margin: 20px;
        background-color: white;
    }
    
    .left1 {
        width: 660px;
        height: 130px;
        /* background-color: aqua; */
        margin: 20px;
    }
    
    .shop {
        width: 50px;
        height: 50px;
        background-color: #f8f9fa;
    }
    
    .left11 {
        width: 640px;
        display: flex;
        justify-content: space-around;
    }
    
    .left12 {
        display: flex;
    }
    
    .left2 {
        width: 100%;
        height: 130px;
        display: flex;
    }
    
    .right {
        width: 700px;
        height: 310px;
        margin: 20px;
        background-color: chartreuse;
    }
    
    #main {
        width: 700px;
        height: 300px;
    }
</style>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: 'Email',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        }, {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        }, {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        }, {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
        }, {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            label: {
                show: true,
                position: 'top'
            },
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }]
    };

    option && myChart.setOption(option);
</script>